<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <a-row :gutter="24">
        <a-col :span="4">
          <ProjectTree
            :treeOptions.sync="treeOptions"
            @select="clickInventoryNode"/>
        </a-col>
        <a-col :span="20">
          <!-- 条件搜索 -->
          <!-- <div class="table-page-search-wrapper">
          <a-form layout="inline">
            <a-row :gutter="48">
              <a-col :md="8" :sm="24">
                <a-form-item label="货物名称">
                  <a-input v-model="queryParam.inventoryName" placeholder="请输入" allow-clear />
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="货物编码" >
                  <a-input v-model="queryParam.inventoryCode" placeholder="请输入" allow-clear />
                </a-form-item>
              </a-col>
              <a-col :md="!advanced && 8 || 24" :sm="24">
                <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
                  <a-button type="primary" @click="handleQuery"><a-icon type="search" />查询</a-button>
                  <a-button style="margin-left: 8px" @click="resetQuery"><a-icon type="redo" />重置</a-button>
                </span>
              </a-col>
            </a-row>
          </a-form>
        </div> -->
          <!-- 操作 -->
          <div class="table-operations">
            <a-button type="primary" @click="$refs.createForm.handleAdd(selectProjectId)" >
              <a-icon type="plus" />新增
            </a-button>
            <table-setting
              :style="{float: 'right'}"
              :table-size.sync="tableSize"
              v-model="columns"
              :refresh-loading="loading"
              @refresh="getList" />
          </div>
          <!-- 创建/编辑,单独封装了组件 -->
          <create-form
            ref="createForm"
            :deptOptions="treeOptions"
            :projectId="selectProjectId"
            @ok="getList"

          />
          <!-- @select-tree="getTreeselect" -->
          <!-- 数据展示 -->
          <a-table
            :loading="loading"
            :size="tableSize"
            rowKey="record => record.id"
            :columns="columns"
            :data-source="list"
            :pagination="false"
            :bordered="tableBordered"
            :defaultExpandAllRows="true"
            :childrenColumnName="'warehouseReceiptList'"
          >

            <span slot="action" slot-scope="text, record">
              <template >

                <a-divider type="vertical"/>
                <a @click="handleUpdate(record, undefined)" >
                  <a-icon type="edit" />查看
                </a>
              </template>
            </span>
          </a-table>
          <a-pagination
            class="ant-table-pagination"
            show-size-changer
            show-quick-jumper
            :current="queryParam.pageNum"
            :total="total"
            :page-size="queryParam.pageSize"
            :showTotal="total => `共 ${total} 条`"
            @showSizeChange="onShowSizeChange"
            @change="changeSize"
          />
        </a-col>
      </a-row>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { page } from '@/api/materials/finishedProductOut'
import { tableMixin } from '@/store/table-mixin'
import CreateForm from './modules/CreateForm.vue'
import ProjectTree from '@/components/ProjectTree'

export default {
components: {
  ProjectTree,
  CreateForm
  },
  mixins: [tableMixin],
  dicts: ['sys_normal_disable', 'sys_user_sex'],
  data () {
    return {
      // 部门树选项
      treeOptions: [],
      queryParam: {
        inventoryName: '',
        inventoryCode: '',
        type: 2,
        pageNum: 1,
        pageSize: 10
      },
      list: [],
      total: 0,
      advanced: false,
      loading: false,
      selectProjectId: undefined,
      columns: [
        {
          title: '序号',
          dataIndex: 'id',
          ellipsis: true,
          width: 80
        },
        {
          title: '出库单编号',
          dataIndex: 'outCode',
          ellipsis: true,
          align: 'center',
          width: 150
        },
        {
          title: '外部批次号',
          dataIndex: 'externalBatchNo',
          ellipsis: true,
          align: 'center',
          width: 150
        },
        {
          title: '内部批次号',
          dataIndex: 'batchNo',
          ellipsis: true,
          align: 'center',
          width: 150
        },
        {
          title: '零件名称',
          dataIndex: 'partName',
          ellipsis: true,
          align: 'center',
          width: 150,
          sorter: (a, b) => a.partName.length - b.name.partName
        },
        {
          title: '零件图号',
          dataIndex: 'partDrawingNo',
          ellipsis: true,
          align: 'center',
          width: 150
        },
        {
          title: '出库数量',
          dataIndex: 'totalQuantity',
          ellipsis: true,
          align: 'center',
          width: 150
        },
        {
          title: '计量单位',
          dataIndex: 'unitOfMeasurement',
          ellipsis: true,
          align: 'center',
          width: 150
        },
        {
          title: '出库日期',
          dataIndex: 'createTime',
          ellipsis: true,
          align: 'center',
          width: 200
        }, {
          title: '操作人',
          dataIndex: 'inspector',
          ellipsis: true,
          align: 'center',
          width: 200
        },
        {
          title: '操作',
          dataIndex: 'action',
          key: 'action',
          fixed: 'right',
          width: 150,
          scopedSlots: { customRender: 'action' }
        }
      ]
    }
  },
  created () {
    this.getList()
  },
  methods: {

    clickInventoryNode (categoryCode) {
      this.queryParam.projectId = categoryCode
      this.selectProjectId = categoryCode
      this.handleQuery()
    },
    onShowSizeChange (current, pageSize) {
      this.queryParam.pageSize = pageSize
      this.getList()
    },
    changeSize (current, pageSize) {
      this.queryParam.pageNum = current
      this.queryParam.pageSize = pageSize
      this.getList()
    },
    /** 查询部门列表 */
    getList () {
      this.loading = true
      page(this.queryParam).then(response => {
        response.rows.forEach(item => {
          // item.children = item.warehouseReceiptList
        })
          this.list = response.rows // this.handleTree(response.data, 'deptId')
          this.total = response.total
          this.loading = false
        }
      )
    },
     /** 搜索按钮操作 */
     handleQuery () {
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery () {
      this.queryParam = {
        deptName: undefined,
        status: undefined
      }
      this.handleQuery()
    }

  }
}
</script>
<style lang="less" scoped>
.page-header-wrapper-grid-content-main {
  width: 100%;
  height: 100%;
  min-height: 100%;
  transition: 0.3s;
  }
  .ant-table td { white-space: nowrap; }
  </style>
